<template>
    <div>
        <div>
            <Row>
                <AutoQuery ref="auto-query" :query="query" :page="page" :buttons="['search','search_all']"></AutoQuery>
            </Row>
        </div>
        <AutoTable :columns="table.columns" :data="abutmentList" :page="page"></AutoTable>
        <div>
            <Modal v-model="detail_modal" class="sheet" width="900px">
                <p slot="header" style="color:#f60;text-align:center">
                    <span>详情</span>
                </p>
                    <table>
                        <thead>
                            <tr><th style="width:18%;">审核项</th><th>内容</th></tr>
                        </thead>
                        <tr><td>平台服务名称</td><td>{{abutment.plateformservice.title}}</td></tr>
                        <tr><td>申请人</td><td>{{abutment.member.username}}</td></tr>
                        <tr><td>申请企业</td><td>{{abutment.member.enterprise_name}}</td></tr>
                        <tr><td>联系电话</td><td>{{abutment.member.mobile_phone}}</td></tr>
                        <tr>
                            <td>附件</td>
                            <td>
                                <p v-for="(item,key) in abutment.appendix_ids" >
                                    <a :href="item.url">{{key+1}}、{{item.name}}</a>
                                </p>
                            </td>
                        </tr>
                    </table>
                </Form>
                <StepsEditor mode="preview_all" source-type="abutment" :source="abutment" @on-submit="handleSubmit(abutment)"></StepsEditor>
                <p v-if="confirm(abutment)" style="color:#888;padding:10px;text-indent:2em;">
                    <span style="color:red;">企业已经提交所有材料，满足申领条件，点击【通过申领】，平台将批准企业申领该服务。</span>
                </p>
                <div slot="footer">
                    <Button v-if="confirm(abutment)" type="primary" :disabled="disabledButton('113015')"  @click="passed">申领通过</Button>
                    <Button type="ghost"  @click="cancel">关闭页面</Button>
                </div>
            </Modal>
        </div>
    </div>
    
</template>
<script>
import AutoQuery from "@/common/components/AutoQuery";
import PlateformServiceAbutment from "@/common/model/PlateformServiceAbutment"
import PlateformService from "@/common/model/PlateformService"
import Vue from 'vue';
import iviewArea from 'iview-area';
import Page from "@/common/model/Page";
import AutoTable from "@/common/components/AutoTable";
import UploadedList from "@/common/components/UploadedList";
import StepsEditor from "@/common/components/StepsEditor"
import parent from "../Parent";

export default {
    extends:parent,
    components: {
        AutoTable,UploadedList,StepsEditor, AutoQuery
    },
    data(){
        return{
            detail_modal:false,
            //formValidate: new PlateformServiceAbutment("search/plateforme_service_abutment",{}),
            page:new Page("plateformabutment/getall"),
            abutment:new PlateformServiceAbutment(),
            query: {
                status: { value: 1, visible: false },
                number:{ type: "input",label: "编号", placeholder: "请输入查询编号"},
                service_number:{ type :"input",label: "服务类别编号", placeholder: "请输入服务类别编号"},
                title: { type: "input", label: "服务名称", placeholder: "请输入平台服务名称" },
                begin_time: { type: "date", label: "申请日期", placeholder: "选择开始时间" },
                end_time: { type: "date", placeholder: "选择截止时间", handleValue: value => { return value + 24*60*60*1000 } },
            },
            table: {
                columns: [
                    {
                        title: '序号', width: 65, align: 'center', render: (h, params) => {
                            return h('div', (this.page.current_page - 1) * this.page.page_size + params.index + 1);
                        }
                    },
                    {
                        title: '编号', render:(h, params) => {
                            return h('div', params.row.number);
                        }
                    },
                    {
                        title: '服务类别编号', render:(h, params) => {
                            return h('div', params.row.service_number);
                        }
                    },
                    {
                        title: '服务名称', render:(h, params) => {
                            return h('div', params.row.plateformservice.title);
                        }
                    },
                    {
                        title: '申请人', render:(h, params) => {
                            return h('div', params.row.member.username);
                        }
                    },
                    {
                        title: '申请企业', render:(h, params) => {
                            return h('div', params.row.member.enterprise_name);
                        }
                    },
                    {
                        title: '申请日期', width: 150, align: 'center', key: 'create_time', sortable: "custom", render: (h, params) => {
                            return h('div',params.row.formated_create_time);
                        }
                    },
                    {
                        title: '操作', key: 'action', width: 200, align: 'center', render: (h, params) => {
                            return h('div', [
                                h('Badge', { 
                                    props: { dot: true, count: params.row.step_abutment_data.status == 1 ? 1 : 0 }, 
                                    style: { marginTop: "5px" } }, [
                                    h('Button', {
                                        props: { type: 'primary', size: 'small' },
                                        on: { click: () => { this.handlecheck(params.row) } }
                                    }, '审核详情')
                                ])
                            ]);
                        }
                    }
                ],
            }
        }
    },
    computed:{
        abutmentList(){
            return PlateformServiceAbutment.parseList(this.page.list);
        }
    },
    methods:{
        confirm(abutment){
            if(abutment.step_abutment_data.step_number == abutment.steps.length){
                return true;
            }
            return false;
        },
        handlecheck(row){
            this.abutment=row;
            this.detail_modal=true;
        },
        handleSubmit(abutment) {
            if(abutment.step_abutment_data.step_number >= abutment.steps.length){

            }else{
                //this.detail_modal = false; 先让页面不关闭吧
            }            
        },
        nextstep(){
            this.api.post();
        },
        passed(){
             this.api.post("plateformabutment/pass",{id:this.abutment.id},res=>{
                if(res.value){
                    this.$CustomMessage.success('审核通过');
                }else{
                    this.$CustomMessage.error('系统错误，请联系管理员');
                }
                this.page.getData();
                this.detail_modal = false;
            });
        },
        cancel(){
            this.detail_modal=false;
        }
    },
    mounted () {
        if(this.$route.query.id) {
            this.api.post("plateformabutment/get",{id:this.$route.query.id},res => {
                this.abutment = PlateformServiceAbutment.parse(res.data);
                this.detail_modal = true;
            });
        }
    }
}
</script>
<style scoped>
    .sheet p {
        margin: 5px;
    }
    .sheet table {
      font-family: Verdana;
      font-weight: bold;  
      border-width: 1px;    
      width: 870px;
      border-collapse: collapse;
  }
  .sheet table thead th{        
      background-color: rgb(81, 130, 187);
      color: #fff;
      border-bottom-width: 0;
  }
  .sheet table tr {
      border-bottom-width: 0;
  }
  .sheet table td {
      border-right: solid 1px rgb(81, 130, 187);  
  }
  .sheet table tr, .sheet table th {
      border-width: 1px;
      border-style: solid;
      border-color: rgb(81, 130, 187);
  }
  .sheet table td, .sheet table th {
      padding: 5px 10px;
      font-size: 13px;
      /* font-family: Verdana;
      font-weight: bold; */
  }
</style>